<template>
  <div>
    <el-form :model="form" ref="formRef" :rules="rules" label-position="top">
      <el-row justify="space-between">
        <el-col :span="24">
          <el-form-item label="影厅名称" required prop="movieHall.hallName">
            <el-input v-model="form.movieHall.hallName"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="影厅描述" required prop="movieHall.hallDescription">
            <el-input v-model="form.movieHall.hallDescription"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="座位行数" required prop="seatTable.rows">
            <el-input-number
                v-model="form.seatTable.rows"
                :min="1"
                :max="10"
                @change="resetTable"
                size="large"/>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="座位列数" required prop="seatTable.cols">
            <el-input-number
                v-model="form.seatTable.cols"
                :min="1"
                :max="10"
                @change="resetTable"
                size="large"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="座位图" required>
            <ZzjSeatTableEdit :seat-table="form.seatTable"></ZzjSeatTableEdit>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="width: 100%;" @click="submit">提交</el-button>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive, ref} from "vue";
import {ElMessage} from "element-plus";

import ZzjSeatTableEdit from "../../../components/ZzjSeatTableEdit.vue";
import api from "../../../api/api";

const props = defineProps({
  movieHallInfo: {
    type: Object,
    default: undefined
  }
})

const form = ref()
const formRef = ref()
const rules = reactive({
  hallName: [
    {required: true, message: '请输入影厅名称', trigger: 'blur'},
  ],
  hallDescription: [
    {required: true, message: '请输入影厅描述', trigger: 'blur'},
  ],
  rows: [
    {
      required: true,
      message: '请输入行数',
      trigger: 'change',
      type: 'number'
    },
  ],
  cols: [
    {
      required: true,
      message: '请输入列数',
      trigger: 'change',
      type: 'number'
    },
  ],
})

const resetTable = () => {
  form.value.seatTable.table = ''
  for (let i = 0; i < form.value.seatTable.rows * form.value.seatTable.cols; i++) {
    form.value.seatTable.table += '6'
  }
}

onBeforeMount(() => {
  //创建
  if (Object.is(props.movieHallInfo, undefined)) {
    form.value =
        {
          movieHall: {
            hallName: "",
            hallDescription: "",
          },
          seatTable: {
            rows: 1,
            cols: 1,
            table: "1",
            totalCount: 0,
            emptyCount: 0,
          }
        }
  } else {
    //编辑
    form.value = props.movieHallInfo
  }
})
const submit = () => {
  let total = 0
  for (let i = 0; i < form.value.seatTable.rows * form.value.seatTable.cols; i++) {
    if (form.value.seatTable.table.charAt(i) == "1") {
      total++
    }
  }
  form.value.seatTable.totalCount = total
  form.value.seatTable.emptyCount = total
  if (props.movieHallInfo == undefined) {
    api.movieHall.createMovieHall({
      hallName: form.value.movieHall.hallName,
      hallDescription: form.value.movieHall.hallDescription,
      rows: form.value.seatTable.rows,
      cols: form.value.seatTable.cols,
      table: form.value.seatTable.table,
      totalCount: form.value.seatTable.totalCount,
      emptyCount: form.value.seatTable.emptyCount
    }).then(res => {
      if (res.data.code == 0) {
        ElMessage.success("添加成功")
      }
    })
  } else {
    api.movieHall.updateMovieHall(form.value).then(res=>{
      if(res.data.code==0){
        ElMessage.success("修改成功")
      }
    })
  }

}
</script>

<style scoped>

</style>